<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <link rel="stylesheet" href="plugins/elementui/index.css">
</head>
<body>
<div id="app">
    <!--展示数据的table表格-->
    <template>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="methodName"
                    label="执行方法名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="parameter"
                    label="执行方法的参数"
                    align="center"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="timeConsuming"
                    label="执行方法耗时(毫秒)"
                    align="center"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="operatorTime"
                    label="操作时间"
                    align="center"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </template>
    <!--分页条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                //表格模型数据
                tableData: [
                    {methodName:"add",parameter:'[{"id":null,"name":"招商银行武湖支行","areaid":1,"address":"武汉市黄陂区武湖接单","telephone":"81801501"}]',timeConsuming:"288",operatorTime:"2023-04-16 08:59:58"}
                ],
                //分页条当前页数
                currentPage: 1,
                //分页条总页数模型数据
                total:0,
                //分页条当前页数模型数据
                pageSize:5
            }
        },
        mounted(){
            //页面加载完成之后发送异步请求进行分页查询
            this.selectByPage();
        },
        methods: {
            //定义带条件的分页查询的方法
            selectByPage(){
                axios.get(`brandLog/selectByPage?page=${this.currentPage}&pageSize=${this.pageSize}`).then(resp=>{
                    //处理响应结果,给对象的模型数据赋值
                    // console.log(resp.data);  //其实就是Result对象
                    console.log(resp.data.data);  //其实就是PageBean对象
                    //1 表格中展示当前页数据；给tableData赋值
                    this.tableData=resp.data.data.rows;
                    //2 展示分页条：给total赋值
                    this.total=resp.data.data.total;
                });
            },
            //分页条事件
            //选择每页条数触发的事件函数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                //修改每页条数
                this.pageSize=val;
                //调用selectByPage方法发送异步请求
                this.selectByPage();
            },
            //点击页码、上一页、下一页触发的事件函数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;//修改当前页数
                //调用selectByPage方法发送异步请求，获取当前页数据
                this.selectByPage();
            }
        }
    });
</script>

</body>
</html>